import { Form, Button, Input, Row, Col, Icon } from 'antd';
import { Link } from 'react-router';
import _ from 'lodash';
import { withProfile } from 'utils';
const FormItem = Form.Item;

let LoginForm = ({ form: { getFieldsValue, getFieldProps }, onLoginSubmit }) => {
  const onSubmit = evt => {
    evt.preventDefault();
    onLoginSubmit(getFieldsValue());
  };

  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 }
  };

  const p = window._profile_;

  const userNameLabel = p ? '用户名：' : '注册邮箱：';
  const userNamePlaceholder = p ? '输入用户名' : '输入注册邮箱';

  return (
    <Form horizontal className='login-form' onSubmit={onSubmit}>
      <div className='form-content'>
        <FormItem label={userNameLabel} {...formItemLayout}>
          <Input type='text' {...getFieldProps('email')} placeholder={userNamePlaceholder}/>
        </FormItem>
        <FormItem label='密码：' {...formItemLayout}>
          <Input type='password' {...getFieldProps('password')} placeholder='输入密码'/>
        </FormItem>
        {
          withProfile('terminus', (<Row>
            <Col span='24'>
              <a href='>忘记密码</a> <a href='>立即注册</a>
            </Col>
          </Row>))
        }
      </div>
      <div className='login-button'>
        <Button htmlType='submit' type='primary'>登录</Button>
      </div>
    </Form>
  );
};

LoginForm = Form.create()(LoginForm);

const LoginBox = ({ loginUser, onLoginSubmit, onLogout }) => {
  if (!_.isEmpty(loginUser)) {
    return (
      <div className='login-box'>
        <div className='login-info'>
          <div className='welcome'>欢迎回来</div>
          <div className='login-user-nick'>{_.isEmpty(loginUser.nick) ? loginUser.email : loginUser.nick}</div>
          <Link to='/console' className='console-link ant-btn ant-btn-primary'>进入控制台</Link>
        </div>
        <a className='logout-link' onClick={onLogout}><Icon type='logout'/> 登出</a>
      </div>
    );
  }

  return (
    <div className='login-box'>
      <LoginForm onLoginSubmit={onLoginSubmit}/>
    </div>
  );
};

export default LoginBox;
